<!-- 热门文章列表 -->
<th:block th:with="articleList=${@articleCountSortTag.listArticlesVoByType(1,@configTag.getKeyDefault('nice','oly.web.theme.nice.article.top.size',10),'ARTICLE','nice','TOP','DESC')}" >
<div class="shrink-0 max-xl:mx-0 ml-2 mb-2 overflow-hidden rounded-lg" th:if="${!#lists.isEmpty(articleList)}">
  <div
    class="columns-2xs p-2 bg-white dark:text-white dark:bg-gray-800 dark:border-gray-700"
  >
    <h6 class="flex">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="w-6 h-6 mb-2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"
        ></path>
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z"
        ></path>
      </svg>
      <span class="pl-2">热门文章</span>
    </h6>
    <div>
      <div class="overflow-hidden my-2 rounded-lg group relative" th:each="article : ${articleList}">
        <a th:href="${niceConfig['oly.web.domain']+'/article/'+article.articleId}" class="group relative block" th:with="imgs=${@commonTag.split(article.articleImg==null?'':article.articleImg)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/static/nice/images/thumbs/}">
          <img
            class="h-40 w-full transition ease-in-out delay-150  group-hover:-translate-y-1 group-hover:scale-110  duration-300"
            th:src="${(imgs==null)?iul+rando+'.jpg':imgs[0]}"
            src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
          />
          <div class="w-full h-40 absolute pt-10 top-0 bg-slate-700/0 max-xl:bg-slate-700/60 transition-bg   group-hover:bg-slate-700/60 duration-1000">
            <p class=" p-1 text-white" th:text="${article.articleTitle}">Flowbite app will help you improve yourself by analysing your everyday life.</p>
        </div> 
        </a>
      </div>
    </div>
  </div>
</div>
</th:block>